import React, { useEffect, useState, useRef } from 'react';

let dotStyle = {
    width:'8px',
    height:'8px',
    borderRadius:'50%',
    position:'absolute',
    left:'0',
    transform:'translateX(-50%)',
    display:'inline-block',
    backgroundColor:'#cacdd4'
}
let lineStyle = {
    width:'2px',
    height:'230px',
    borderRight:'2px dashed #d7dbe4',
    position:'absolute',
    left:'0',
    bottom:'0',
    transform:'translateX(-50%)',
}
let infoStyle = {
    width:'240px',
    height:'50px',
    lineHeight:'50px',
    borderRadius:'6px',
    display:'flex',
    position:'absolute',
    left:'0',
    bottom:'230px',
    paddingLeft:'1rem',
    transform:'translateX(-50%)',
    backgroundColor:'#fff',
    boxShadow:'0 3px 6px -4px #0000001f, 0 6px 16px #00000014',
    whiteSpace:'nowrap',
    zIndex:'10'
};
let infoList = [
    { posX:'20', posY:'130', title:'冷冻回出水温度', value:29.1, unit:'℃', status:'正常'  },
    { posX:'60', posY:'40', title:'冷冻水出水温度', value:32.2, unit:'℃', status:'正常' }
]
function MachImgContainer({ info }){
    const imgContainer = useRef();
    return (
        <div style={{ width:'44%', position:'relative', height:'100%', padding:'1rem'  }}>
            <div ref={imgContainer} style={{ 
                width:'460px', 
                height:'260px', 
                WebkitBoxReflect:'below 2px linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2))', 
                position:'absolute', 
                left:'50%', 
                top:'50%', 
                transform:'translate(-50%, -50%)', 
                backgroundRepeat:'no-repeat',
                backgroundImage:`url(${info.path})`,
                backgroundSize:'contain',
                backgroundPosition:'50% 50%'
            }}>
                {
                    infoList.map((item, index)=>(
                        <div
                            key={index}
                            style={{
                                position:'absolute',
                                left:item.posX + 'px',
                                top:item.posY + 'px',
                                
                            }}
                        >
                            <div style={{ ...dotStyle }}></div>
                            <div style={{ ...lineStyle }}></div>
                            <div style={{ ...infoStyle }}>
                                <div style={{ flex:'2' }}>
                                    <span style={{ fontSize:'1.2rem', color:'#39e863', marginRight:'4px' }}>正常</span>
                                    <span>{ item.title }</span>
                                </div>
                                <div style={{ flex:'1', backgroundImage:'linear-gradient(to bottom, #3ceb65, #15c73f)', textAlign:'center', borderTopRightRadius:'6px', borderBottomRightRadius:'6px' }}>
                                    <span style={{ fontSize:'1.4rem', color:'#fff' }}>{ item.value + item.unit }</span>
                                </div>
                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}

export default MachImgContainer;